//root
[data-name=cs] {
  #fks-app{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: hidden;

    .copyright {
      position: absolute;
      z-index: 1000;
      bottom: 10px;
      left: 50%;
      white-space: nowrap;
      color: #999;
      transform: translate(-50%);
    }

    >.copyright {
      margin-left: calc(#{$sideBarWidth} / 2);
      transition: margin-left .15s;
    }

    //App > .main-container
    .main-container {
      position: relative;
      min-height: 100%;
      margin-left: $sideBarWidth;
      background: #f1f2f6;
      transition: margin-left .15s;
      //App > .main-container > fks-app-main
      .fks-app-main {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: calc(100vh - 56px);
        padding: 16px;
        overflow: auto;

        &.tags-view {
          padding: 0 16px 16px;
        }

        &.footer-view {
          padding: 16px 16px 0;
        }

        &.tags-view.footer-view {
          padding: 0 16px 40px;
        }

        &.tags-view,
        &.footer-view {
          height: calc(100vh - 96px);
        }

        &.full-screen {
          height: 100vh !important;
          padding: 0 !important;
          background-color: #fff !important;
        }

      }
    }

    .logo-container {
      position: relative;
      flex: none;
      box-sizing: border-box;
      width: $sideBarWidth;
      height: 56px;
      overflow: hidden;
      line-height: 56px;
      text-align: center;
      background: mix(#000, $theme, 10%);
      transition: width .15s;

      .logo {
        transition: transform .14s;
      }
      & .logo-link {
        width: 100%;
        height: 100%;


        & .logo {
          vertical-align: middle;
          color: #eee;
        }
      }
    }

    //Navbar
    .head-navbar-container {
      z-index: 1002;
    }

    //Sidebar
    .sidebar-container {
      position: fixed;
      z-index: 1001;
      top: 64px;
      bottom: 0;
      width: $sideBarWidth !important;
      height: 100%;
      overflow: hidden;
      font-size: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .15) 79%, rgba(0, 0, 0, .2) 100%), var(--theme-color);
      transition: width .15s;

      // reset fawkes-lib css
      .horizontal-collapse-transition {
        transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
      }

      .scrollbar-wrapper {
        overflow-x: hidden !important;
      }

      .fks-scrollbar__bar.is-vertical {
        right: -8px;
      }

      .fks-scrollbar {
        height: calc(100% - 88px);
      }

      .is-horizontal {
        display: none;
      }

      a {
        display: inline-block;
        width: 100%;
        overflow: hidden;
      }

      .fks-menu {
        width: 100% !important;
        height: 100%;
        border: none;
        background: transparent;
        .fks-submenu.is-opened {
          background: rgba(0, 0, 0, .04);
        }
        &-item.is-active {
          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 40px;
            background: var(--theme-color);
          }

          &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--theme-color) !important;
            opacity: .1;
          }
        }
        &-item:focus {
          color: #fff ;
          background-color: $theme;
        }
      }

      // menu hover
      .fks-submenu__title {
        i {
          color: #fff;
        }

        &:hover {
          color: #fff ;
          background-color: rgba($theme, .6) ;
        }
      }

      .is-active {
        &:not(.is-opened) {
          color: #fff;
          background-color: $theme;
          transition: background-color .15s .15s;
        }
        // >.fks-submenu__title {
        //   color: #fff;
        //   background-color: $theme !important;
        // }

        // &.is-opened .is-active.is-opened .fks-submenu__title {
        //   background-color: rgba($theme, .8) !important;
        // }

        // &.is-opened > .fks-submenu__title {
        //   background-color: rgba($theme, .6) !important;
        // }
      }
    }

    //App > hideSidebar > main-containner
    &.hideSidebar {
      .main-container {
        padding-left: 0;
        margin-left: 0 !important;
      }

      >.copyright {
        margin-left: 0 !important;
      }
    }

    //App > collapseSidebar
    &.collapseSidebar {
      .sidebar-container {
        width: #{$collapseBarWith} !important;

        .fks-submenu {
          overflow: hidden;

          & > .fks-submenu__title {
            padding: 0 !important;

            .svg-icon {
              margin-left: 20px;
            }

            .fks-submenu__icon-arrow {
              display: none;
            }
          }
        }

        .fks-menu--collapse {
          .fks-submenu {
            & > .fks-submenu__title {
              & > span {
                display: inline-block;
                width: 0;
                height: 0;
                overflow: hidden;
                visibility: hidden;
              }
            }
          }
        }
      }

      .main-container {
        margin-left: $collapseBarWith;
      }

      >.copyright {
        margin-left: calc(#{$collapseBarWith} / 2);
      }

      .logo-container {
        width: $collapseBarWith;

        .logo {
          transform: translateX(8px);
        }
      }
    }

    .fks-menu--collapse .fks-menu .fks-submenu {
      min-width: $sideBarWidth !important;
    }

    // mobile responsive
    &.mobile {
      position: fixed;
      top: 0;

      .main-container {
        margin-left: 0;
      }

      .sidebar-container {
        width: $sideBarWidth !important;
      }

      &.collapseSidebar {
        .sidebar-container {
          transform: translate3d(-$sideBarWidth, 0, 0);
          transition-duration: .3s;
          pointer-events: none;
        }
      }
    }

    .withoutAnimation {
      .main-container,
      .sidebar-container,
      >.copyright {
        transition: none;
      }
    }

    .fks-menu .svg-icon {
      margin-right: 5px;
    }

    @include clearfix;
  }

  .sidebar-container,
  .fks-menu--vertical .nest-menu {
    & .fks-submenu > .fks-submenu__title,
    & .fks-submenu .fks-menu-item,
    & .fks-menu-item {
      height: $menuItemHeight;
      line-height: $menuItemHeight;
      color: #ffffffe6;
      //min-width: $sideBarWidth !important;
      // background-color: $subMenuBg !important;
      i {
        color: #fff;
      }

      &:hover {
        color: #fff ;
        background-color: rgba($theme, .6) ;
      }

      &.is-active {
        background-color: $theme;
      }
    }
  }

  .fks-menu--vertical {
    :not(.nest-menu) .fks-submenu > .fks-submenu__title span + span {
      margin-left: 24px;
    }

    .nest-menu .fks-submenu > .fks-submenu__title,
    .fks-menu-item {
      &:hover {
        // you can use $subMenuHover
        background-color: $menuHover !important;
      }
    }

    // the scroll bar appears when the subMenu is too long
    >.fks-menu--popup {
      max-height: 100vh;
      overflow-y: auto;
      background: mix(#000, $theme, 10%);
      background-color: none !important;

      &::-webkit-scrollbar-track-piece {
        background: #d3dce6;
      }

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 20px;
        background: #99a9bf;
      }
    }
  }
}